<template>
  <div class="gray-page visit-record-page">
    <nav-bar title="人员走访" border></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-field
        readonly
        clickable
        input-align="right"
        v-model="searchForm.labelName"
        label="人员标签"
        placeholder="请筛选人员标签"
        right-icon="arrow"
        :border="false"
        @click="labelOnOpen"
      />
      <van-sticky class="page-scroll" :offset-top="96">
        <template v-if="listData.length">
          <gb-card
            class="list-item"
            labelType="plain"
            :labelText="item.labelName"
            color="#E28556"
            v-for="(item, key) in listData"
            :key="key"
            @click="
              $router.push({
                path: '/inspectvisit/visit/report',
                query: {
                  gridCode: item.gridCode,
                  personCode: item.personCode,
                  personName: item.personName,
                  labelCode: item.labelCode,
                  labelName: item.labelName,
                  idType: item.idType,
                  idTypeName: item.idTypeName,
                  idCard: item.idCard,
                  labelIndex: searchForm.labelIndex
                }
              })
            "
          >
            <dl class="gb-card-dl">
              <dt>
                <template v-if="item.personImage">
                  <img :src="$config.ImageURl + item.personImage" alt="" />
                </template>
                <template v-else>
                  <img
                    :src="
                      require(`@/assets/images/inspectVisit/visit/pic_photo_${
                        item.sex === '1' ? 'man' : 'woman'
                      }@2x.png`)
                    "
                    alt=""
                  />
                </template>
              </dt>
              <dd>
                <p class="gb-card-info">
                  <span class="gb-card-info__label" style="width: auto">姓名</span>
                  <span class="gb-card-info__value">{{ item.personName }}</span>
                </p>
                <p class="gb-card-info">
                  <span class="gb-card-info__label" style="width: auto">性别</span>
                  <span class="gb-card-info__value">{{ item.sexName }}</span>
                </p>
                <p class="gb-card-info">
                  <span class="gb-card-info__label" style="width: auto">证件号码</span>
                  <span class="gb-card-info__value">{{ item.idCard }}</span>
                </p>
              </dd>
            </dl>
            <p class="gb-card-info">
              <span class="gb-card-info__label">常住地址</span>
              <span class="gb-card-info__value">{{ item.houseInfo }}</span>
            </p>
            <p class="gb-card-info" v-if="item.intervieweeTime">
              <span class="gb-card-info__label">上次走访时间</span>
              <span class="gb-card-info__value">{{ item.intervieweeTime }}</span>
            </p>
          </gb-card>
        </template>
        <template v-else>
          <van-empty
            :image="require('@/assets/images/basic/pic_no_content.png')"
            description="暂无内容~"
            style="height: 300px"
          />
        </template>
      </van-sticky>
    </div>
    <van-popup v-model="labelPopupShow" round position="bottom">
      <van-picker
        ref="labelPicker"
        show-toolbar
        :columns="labelData"
        value-key="labelName"
        @cancel="labelPopupShow = false"
        @confirm="labelOnConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
import General from '@/api/general'
import InspectVisit from '@/api/inspectVisit'
export default {
  data() {
    return {
      listData: [],
      searchForm: {
        labelType: this.$route.query.labelType,
        labelCode: this.$route.query.labelCode,
        labelName: this.$route.query.labelName,
        labelIndex: this.$route.query.labelIndex
      },
      labelFirstLoad: true,
      labelPopupShow: false,
      labelData: [
        {
          labelName: '特殊人员',
          labelCode: '1',
          children: []
        },
        {
          labelName: '关爱人员',
          labelCode: '3',
          children: []
        },
        {
          labelName: '重点青少年',
          labelCode: '4',
          children: []
        }
      ]
    }
  },
  created() {
    this.getLabel()
    this.getList()
  },
  methods: {
    // 获取标签
    getLabel() {
      General.Region.getLabel({
        labelType: '1,3,4'
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          for (const item of this.labelData) {
            item.children = data[item.labelCode]
          }
        }
      })
    },
    // 标签弹窗 - 打开
    labelOnOpen() {
      this.labelPopupShow = true
      this.$nextTick(() => {
        if (this.labelFirstLoad) {
          this.labelFirstLoad = false
          this.$refs.labelPicker.setIndexes(this.searchForm.labelIndex.split(','))
        }
      })
    },
    // 标签弹窗 - 确认
    labelOnConfirm(values, indexs) {
      this.searchForm.labelIndex = indexs
      this.searchForm.labelType = this.labelData[indexs[0]].labelCode
      this.searchForm.labelCode = this.labelData[indexs[0]].children[indexs[1]].labelCode
      this.searchForm.labelName = this.labelData[indexs[0]].labelName
      this.searchForm.labelName += ' - ' + this.labelData[indexs[0]].children[indexs[1]].labelName
      this.labelPopupShow = false
      this.getList()
    },
    // 列表
    getList() {
      InspectVisit.Visit.list(this.searchForm).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.listData = data
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/list.less';
</style>
